<!DOCTYPE html>
<html>
<head>
{include file="common/head"}
<style>
.topic-list li {
    width: calc((100% - 0px));
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
    height: 280px;
    background-color: #fff;
    position: relative;
    margin-top: 50px;
    text-align: center;
    padding: 0 20px;
    box-sizing: border-box;
    transition: all .3s ease;
    border-radius: 3px;
}
.topic-list li .images {
    margin: -40px 0 10px;
}
.topic-list li .name {
    font-size: 21px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 10px;
    margin-bottom: 10px;
}
.topic-list li .desc {
    font-size: 13px;
    line-height: 25px;
    color: #999;
    margin-bottom: 10px;
    height: 50px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.topic-list li .images img {
    width: 100px;
    height: 100px;
    border-radius: 8px;
    border: 1px solid #ddd;
    background-color: #fff;
}
.topic-list li:hover {
    box-shadow: 0 20px 40px rgba(0,0,0,.12);
    transform: translateY(-4px);
}
mdall {
color: #777;
}
</style>
</head>

<body>
{include file="common/header"}
<div class="layui-container" style="margin-top: 80px;">
  <div class="layui-row layui-col-space15">
  
    <div class="layui-col-md9">
      <div class="layui-card">
        <div class="layui-card-body">
        	<fieldset class="layui-elem-field layui-field-title">
  			<legend>话题广场</legend>
			</fieldset>
          <p>话题是用于将相似的问题或文章进行归类，正确的使用话题能更快的发现和解决你的问题</p> 
        </div>
      </div>
      <!---->
      <div class="layui-row layui-col-space15">
  {volist name="logs" id="item"}
    <div class="layui-col-md4 topic-list">
      <li>
	  <a href="{:url('wendasns/topic/show',['tags'=>$item.name])}" style="color: #01AAED;" target="_blank">
	  <div class="images"><img loading="lazy" src="{if $item.icon}{$item.icon}{else}/image/topic/topics.jpg{/if}" class="avatar opacity" alt="{$item.name}"></div>
		<div class="name">{$item.name}</div>
		<div class="desc">{if $item.intro}{$item.intro}{else}这里是{$item.name}话题的介绍{/if}</div></a>
		<button type="button" class="layui-btn layui-btn-lg layui-btn-primary layui-btn-radius"><a href="{:url('wendasns/topic/follow')}" class="J_req" data-json='{"id":"{$item.id}"}' data-click="follow" style="float: right;color: #01AAED;">{if $item.isfollow} 取消关注{else}<i class="fas fa-plus-circle"></i> 关注{/if}</a></button>
		<hr>
		<div class="layui-col-md4 layui-col-sm4 layui-col-xs4">
                <p class="h4">{$item.asknum}</p>
                <mdall>问题</mdall>
              </div>
		<div class="layui-col-md4 layui-col-sm4 layui-col-xs4">
                <p class="h4">{$item.artnum}</p>
                <mdall>文章</mdall>
              </div>
		<div class="layui-col-md4 layui-col-sm4 layui-col-xs4">
                <p class="h4">{$item.follow}</p>
                <mdall>关注</mdall>
              </div>	  
	  </li>
    </div>
  {/volist}
      </div>
      <!---->
      <div class="layui-row"><div class="pager">{$logs->render()|raw}</div></div>
    </div>

    <div class="layui-col-md3">
      <div class="layui-card">
        <div class="layui-card-header">热门话题</div>
        <div class="layui-card-body">
          {volist name=":load_tags()" id="item"}
          	<a href="{:url('wendasns/topic/show',['tags'=>$item.name])}"><span class="layui-badge layui-bg-gray">{if $item.icon}<i class="layui-icon {$item.icon}" style="font-size: 14px;"></i> {/if}{$item.name}</span></a>
          {/volist}
        </div>
      </div>
      
      {:load_advert('WebRightThree')}
      
    </div>  
  </div>
  
</div>
{include file="common/footer"}
</body>
</html>